<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" th:href="@{/css/discuss-detail.css}"/>
    <title>牛客网-帖子详情</title>
</head>
<body>
<div class="nk-container">
    <!-- 头部 -->
    <header class="bg-dark sticky-top" th:replace="index::header"></header>

    <!-- 内容 -->
    <div class="main">
        <!-- 帖子详情 -->
        <div class="container">
            <!-- 标题 -->
            <h6 class="mb-4">
                <img src="http://static.nowcoder.com/images/img/icons/ico-discuss.png"/>
                <span th:utext="${post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</span>
                <div class="float-right">
                    <button type="button" class="btn btn-danger btn-sm">置顶</button>
                    <button type="button" class="btn btn-danger btn-sm">加精</button>
                    <button type="button" class="btn btn-danger btn-sm">删除</button>
                </div>
            </h6>
            <!-- 作者 -->
            <div class="media pb-3 border-bottom">
                <a href="profile.html">
                    <img th:src="${user.avatar}" class="align-self-start mr-4 rounded-circle user-header"  alt="用户头像">
                </a>
                <div class="media-body">
                    <div class="mt-0 text-warning" th:utext="${user.username}">寒江雪</div>
                    <div class="text-muted mt-3">
                        发布于 <b th:text="${#dates.format(post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
<!--                        <ul class="d-inline float-right">-->
<!--                            <li class="d-inline ml-2">-->
<!--                                <a href="javascript:;" th:onclick="|like(this, 1, ${post.id}, ${post.userId}, ${post.id});|" class="text-primary">-->
<!--                                    &lt;!&ndash; 赞1 // entityType: 1-帖子; 2-评论 // likeStatus==1: 1 表示点赞, 0 表示取消赞 (用整数表示更具有扩展性) &ndash;&gt;-->
<!--                                    <b th:text="${likeStatus==1?'已赞':'赞'}">赞</b> <i th:text="${likeCount}">11</i>-->
<!--                                </a>-->
<!--                            </li>-->
<!--                            <li class="d-inline ml-2">|</li>-->
<!--                            <li class="d-inline ml-2">-->
<!--                                <a href="#replyform" class="text-primary">回帖-->
<!--                                    <span th:text="${post.commentCount}">7</span>-->
<!--                                </a>-->
<!--                            </li>-->
<!--                        </ul>-->
                    </div>
                </div>
            </div>
            <!-- 正文 -->
            <div class="mt-4 mb-3 content" th:utext="${post.content}">
                帖子正文
            </div>
        </div>
        <!-- 回帖 -->
        <div class="container mt-3">
            <!-- 回帖数量 -->
            <div class="row">
                <div class="col-8">
                    <h6><b class="square"></b> <i th:text="${post.commentCount}">30</i>条回帖</h6>
                </div>
                <div class="col-4 text-right">
                    <a href="#replyform" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</a>
                </div>
            </div>
            <!-- 回帖列表 -->
            <ul class="list-unstyled mt-4">
                <!--遍历comments集合, 每个元素取名为cvo -->
                <li class="media pb-3 pt-3 mb-3 border-bottom" th:each="cvo:${comments}">
                    <a href="profile.html">
                        <img th:src="${cvo.user.avatar}" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像">
                    </a>
                    <div class="media-body">
                        <div class="mt-0">
                            <span class="font-size-12 text-success" th:text="${cvo.user.username}">回帖人名</span>
                            <span class="badge badge-secondary float-right floor">
                                <!--第几楼=当前页的起始行(page.offset)+当前循环次数(cvoStat.count: cvoStat是隐含对象名字, 固定为: `上面的cvo加上Stat`)-->
                                <i th:text="${page.offset + cvoStat.count}">1</i>#
                            </span>
                        </div>
                        <div class="mt-2" th:text="${cvo.comment.content}">
                            这开课时间是不是有点晚啊。。。
                        </div>
                        <div class="mt-4 text-muted font-size-12">
                            <span>
                                发布于 <b th:text="${#dates.format(cvo.comment.createTime, 'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
                            </span>
                            <ul class="d-inline float-right">
                                <li class="d-inline ml-2">
<!--                                    <a href="javascript:;" th:onclick="|like(this,2,${cvo.comment.id}, ${cvo.comment.userId}, ${post.id});|" class="text-primary">-->
<!--                                        &lt;!&ndash; 赞2 // entityType: 1-帖子; 2-评论 // likeStatus==1: 1 表示点赞, 0 表示取消赞 (用整数表示更具有扩展性) &ndash;&gt;-->
<!--                                        <b th:text="${cvo.likeStatus==1?'已赞':'赞'}">赞</b>(<i th:text="${cvo.likeCount}">1</i>)-->
<!--                                    </a>-->
                                </li>
                                <li class="d-inline ml-2">|</li>
                                <li class="d-inline ml-2">
                                    <a href="#" class="text-primary">
                                        回复(<span th:text="${cvo.replyCount}">2</span>)
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- 回复列表 -->
                        <ul class="list-unstyled mt-4 bg-gray p-3 font-size-12 text-muted">
                            <!-- 遍历回复列表 -->
                            <li class="pb-3 pt-3 mb-3 border-bottom" th:each="rvo:${cvo.replys}">
                                <div>
                                    <!-- 没有目标的回复 -->
                                    <span th:if="${rvo.target==null}">
										<b class="text-info" th:text="${rvo.user.username}">寒江雪</b>:&nbsp;&nbsp;
									</span>
                                    <!-- 有目标的回复 -->
                                    <span th:if="${rvo.target!=null}">
										<i class="text-info" th:text="${rvo.user.username}">Sissi</i> 回复
										<b class="text-info" th:text="${rvo.target.username}">寒江雪</b>:&nbsp;&nbsp;
                                    </span>
                                    <span th:utext="${rvo.reply.content}">这个是直播时间哈，觉得晚的话可以直接看之前的完整录播的~</span>
                                </div>
                                <div class="mt-3">
                                    <span th:text="${#dates.format(rvo.reply.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</span>
                                    <ul class="d-inline float-right">
                                        <li class="d-inline ml-2">
                                            <!-- 赞3 // entityType: 1-帖子; 2-评论 // likeStatus==1: 1 表示点赞, 0 表示取消赞 (用整数表示更具有扩展性) -->
<!--                                            <a href="javascript:;" th:onclick="|like(this,2,${rvo.reply.id}, ${rvo.reply.userId}, ${post.id});|" class="text-primary">-->
<!--                                                <b th:text="${rvo.likeStatus==1?'已赞':'赞'}">赞</b>(<i th:text="${rvo.likeCount}">1</i>)-->
<!--                                            </a>-->
                                        </li>
                                        <li class="d-inline ml-2">|</li>
                                        <li class="d-inline ml-2">
                                            <!-- 3 回复匹配: 回复按钮 -->
                                            <a th:href="|#huifu-${rvoStat.count}|" data-toggle="collapse" class="text-primary">回复</a>
                                        </li>
                                    </ul>
                                    <!-- 3 回复匹配: 设置回复id -->
                                    <div th:id="|huifu-${rvoStat.count}|" class="mt-4 collapse">
                                        <form method="post" th:action="@{|/comment/add/${post.id}|}">
                                            <div>
                                                <input type="text" name="content" class="input-size" th:placeholder="|回复${rvo.user.username}|"/>
                                                <input type="hidden" name="entityType" value="2">
                                                <input type="hidden" name="entityId" th:value="${cvo.comment.id}">
                                                <!-- 3 回复匹配: 针对那个用户的评论进行回复 -->
                                                <input type="hidden" name="targetId" th:value="${rvo.user.id}">
                                            </div>
                                            <div class="text-right mt-2">
                                                <button type="submit" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </li>
                            <!-- 2 回复输入框 -->
                            <li class="pb-3 pt-3">
                                <form method="post" th:action="@{|/comment/add/${post.id}|}">
                                    <div>
                                        <input type="text" class="input-size" name="content" placeholder="请输入你的观点"/>
                                        <input type="hidden" name="entityType" value="2">
                                        <input type="hidden" name="entityId" th:value="${cvo.comment.id}">
                                    </div>
                                    <div class="text-right mt-2">
                                        <button type="submit" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- 分页 -->
            <nav class="mt-5" th:replace="index::pagination">
                <ul class="pagination justify-content-center">
                    <li class="page-item"><a class="page-link" href="#">首页</a></li>
                    <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">末页</a></li>
                </ul>
            </nav>
        </div>
        <!-- 1 回帖输入 -->
        <div class="container mt-3">
            <form class="replyform" method="post" th:action="@{|/comment/add/${post.id}|}">
                <p class="mt-3">
                    <a name="replyform"></a>
                    <!-- 内容对应comment对象中的content字段, 这样在CommentController才能接收到comment对象中 -->
                    <textarea placeholder="在这里畅所欲言你的看法吧!" name="content"></textarea>
                    <!-- 隐藏框用来设置 添加帖子时的 默认参数, 传入comment对象, name同上也要对应起来 -->
                    <input type="hidden" name="entityType" value="1">
                    <input type="hidden" name="entityId" th:value="${post.id}">
                </p>
                <p class="text-right">
                    <button type="submit" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;帖&nbsp;&nbsp;</button>
                </p>
            </form>
        </div>
    </div>

    <!-- 尾部 -->
    <footer class="bg-dark" th:replace="index::footer"></footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/discuss.js}"></script>
</body>
</html>
